<!DOCTYPE html>
<html lang="en">
<head>
    <!--收费管理-> 2，抄表录入-->
    <meta charset="UTF-8">
    <title>抄表录入</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../plugins/layui/layui.js"></script>
    <script type="text/javascript" src="./js/xlsx.core.min.js"></script>
    <script type="text/javascript" src="./js/xlsx.full.min.js"></script>
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background: #cccccc;
            border: 3px dashed #000000;
            text-align: center;
            line-height: 500px;
        }
        .lqwvje-btn {
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }
        table{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <h1 style="font-weight: bolder;text-shadow:5px 5px 5px burlywood ">首页>收费管理>抄表录入</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <b  style="font-size: larger;font-weight: bolder">收费项目：</b>
            <select style="height: 30px;" id="se">
            <option value="0">请选择收费项目</option>
            </select>
        </div>
        <div class="col-md-3">
            <b style="font-size: larger;font-weight: bolder">房间号：</b>
            <input  style="height: 33px"  type="text" placeholder="请输入房间号...." id="text"/>
            <button id="butt" style="margin-top: -3px"  class="btn btn-primary glyphicon glyphicon-search" type="button"></button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button class="btn btn-primary" data-toggle="modal" data-target="#addmyModal1">录入数据</button>
            <button class="btn btn-primary" data-toggle="modal" data-target="#addmyModal2">导入抄表单</button>
            <button id="delects" class="btn btn-primary" >批量删除</button>
        </div>
    </div>

    <div class="row" style=" overflow: scroll;height:800px;">
        <div  class="col-md-12 ">
            <table style="table-layout: fixed"  class="table table-hover table-striped table-bordered" id="tableone1">
                <tr style="position: sticky;top:0;z-index: 999;font-weight: bolder;font-size: larger">
                    <td>
                        <input  type="checkbox" id="quanxuan"/>
                    </td>
                    <td>明细单编号</td>
                    <td>房间号</td>
                    <td>收费项目名称</td>
                    <td>单价</td>
                    <td>用量</td>
                    <td>缴费状态</td>
                    <td>账单日</td>
                    <td>费用</td>
                    <td>备注</td>
                    <td>操作人</td>
                    <td>操作时间</td>
                    <td>操作</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<input hidden id="hidd"/>
<!--(1)收费管理→抄表录入->录入数据模态框-->
<div  class="modal fade" id="addmyModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">录入数据</h4>
            </div>
            <div class="modal-body">
                <div class="form-group has-feedback">
                    <label>用户选定</label>
                    小区<select id="xiaoqu">
                    <option value="0">请选择</option>
                </select>
                    楼宇<select id="louyu">
                    <option value="0">请选择</option>
                </select>
                    单元<select id="danyuan">
                    <option value="0">请选择</option>
                </select>
                    房间号<select id="fangjianhao">
                    <option value="0">请选择</option>
                </select>
                </div>
                <div class="form-group has-feedback">
                    <label>项目</label><br>
                    <!-- Split button -->
                    <div class="btn-group">
                        <button id="but" class="btn btn-default dropdown-toggle" type="button" style="width: 500px"  data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            请选择
                        </button>
                        <ul class="dropdown-menu" id="ul">
                        </ul>
                    </div>

                </div>
                <div class="form-group has-feedback">
                    <label>起始用量</label><br>
                    周期<input id="zhouqi" readonly placeholder="自动生成.."/>
                    单价<input id="dj" name="bianhua" readonly placeholder="自动生成..."/>
                </div>
                <div class="form-group has-feedback">
                    <label>起始用量</label>
                    <input type="number" name="bianhua" id="qsyl" class="form-control"  placeholder="请输入起始用量..."/>
                </div>
                <div class="form-group has-feedback">
                    <label>截至用量</label>
                    <input type="number" name="bianhua" id="jzyl" class="form-control"  placeholder="请输入截至用量..."/>
                </div>
                <div class="form-group has-feedback">
                    <label>费用（元）</label>
                    <input value="0" type="number" readonly id="fy" class="form-control"  placeholder="自动生成..."/>
                </div>
                <div class="form-group has-feedback">
                    <label>账单日</label>
                    <input  readonly id="zdr" class="form-control"  placeholder="请输入账单日..."/>
                </div>
                <div class="form-group has-feedback">
                    <label>备注</label>
                    <input id="bz" class="form-control"  placeholder="请输入备注..."/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="button02" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

<!--(1)收费管理→抄表录入->修改数据-->
<div  class="modal fade" id="addmyModal0" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="xg" >修改数据</h4>
            </div>
            <div class="modal-body">
                <div class="form-group has-feedback">
                    <label>缴费户地址:</label>
                    <p style="margin-left: 30px" id="dizhi"></p>

                    <label>缴费类型:</label>
                    <p style="margin-left: 30px" id="leixing"></p>

                    <label>单价:</label>
                    <p style="margin-left: 30px" id="danjia"></p>

                    <label>起始用量:</label>
                    <input type="number" class="form-group" id="q"/>

                    <label>截至用量:</label>
                    <input type="number" class="" id="j"/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="button021" type="button" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>


<!--(1)收费管理→抄表录入->录入excel数据模态框-->
<div class="modal fade" id="addmyModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" >请导入抄表单</h4>
            </div>
            <div class="modal-body">
                <label id="realBtn" class="lqwvje-btn">
                    <input type="file" id="testFile" hidden="hidden">
                    上传文件
                </label>
               <table id="xsl" class="table table-hover table-striped">
                    <tr>
                        <td>项目名称</td>
                        <td>周期</td>
                        <td>单价/元</td>
                        <td>住址</td>
                        <td>用用量</td>
                        <td>费用/元</td>
                        <td>账单日</td>
                        <td>备注</td>
                    </tr>
               </table>
                <div class="progress">
                    <div id="jdt" class="progress-bar progress-bar-success" role="progressbar"  aria-valuemin="0">

                    </div>
                 </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="button01">提交</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
        document.querySelector("#testFile").addEventListener("change", function () {
            //获取到选中的文件
            var file = document.querySelector("#testFile").files[0];
            if (file.size > 1024 * 1024) {
                alert('当前文件大小:' + Math.floor(file.size / 1024) + 'KB,上传文件不能大于1024KB');
                return false;
            }
            var type = file.name.split('.');
            if (type[type.length - 1] !== 'xlsx' && type[type.length - 1] !== 'xls') {
                alert('只能选择excel文件导入');
                return false;
            }
            let reader = new FileReader();
            reader.readAsBinaryString(file);
            reader.onload = function (e) {
                let data = e.target.result;
                let zzexcel = XLSX.read(data, {
                    type: "binary"
                });
                let result = [];
                for (let i = 0; i < zzexcel.SheetNames.length; i++) {
                    let newData = XLSX.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[i]]);
                    result.push(...newData)
                }
                let obj = JSON.stringify(result)
                $("#hidd").val(obj);
                luruxsl(result)
            }
        });
</script>
<script type="text/javascript">
            let iam;
            function luruxsl(result) {
                $("#xsl tr:not(:first)").remove()
                for (let re of result) {
                    let tr = document.createElement("tr")
                    let td1 = document.createElement("td")
                    td1.innerText = re.主项目名称 + "_" + re.子项目名称
                    let td2 = document.createElement("td")
                    td2.innerText = re.周期
                    let td3 = document.createElement("td")
                    td3.innerText = re.单价
                    let td4 = document.createElement("td")
                    td4.innerText = re.在住小区 + "_" + re.楼宇 + "_" + re.单元号 + "_" + re.房号
                    let td5 = document.createElement("td")
                    let monsuma = parseFloat(re.截至用量) - parseFloat(re.起始用量)
                    td5.innerText = monsuma
                    let td6 = document.createElement("td")
                    td6.innerText = re.费用
                    let td7 = document.createElement("td")
                    td7.innerText = re.账单日
                    let td8 = document.createElement("td")
                    td8.innerText = re.备注
                    $(tr).append(td1, td2, td3, td4, td5, td6, td7, td8)
                    $("#xsl").append(tr)
                }
                iam = 0;
                $("#jdt").get(0).style.width = "0%"
                $("#jdt").html("")
                let inter = setInterval(function (){
                    iam++
                    $("#jdt").get(0).style.width = iam+"%"
                    $("#jdt").html(iam+"%")
                    if(iam==100){
                        clearInterval(inter)
                    }
                },16)
            }
</script>
<script type="text/javascript">
$(function (){
    /**
     * 修改提交
     */
    $("#button021").on("click",function (){
        let q = $("#q").val();
        let j = $("#j").val();
        if(q==""||j==""){
            Dialogs("数据未填写完毕","red")
            return;
        }
        if(parseFloat(q)>=parseFloat(j)){
            Dialogs("起始用量不能大于等于截至用量","red")
            return;
        }
        let zl=parseFloat(j)-parseFloat(q)
        $.ajax({
            url:"xiugaimingxibiaoone",
            type:"post",
            dataType:"json",
            data:{"did":$("#xg").val(),"zl":zl},
            success:function(data){
                if(data){
                    succ("修改成功")
                }else {
                    Dialogs("修稿失败","red")
                }
            }
        });




    });


    /**
     * 时间变
     */
    function shijian(){
        let date = new Date();
        $("#zdr").val(date.toLocaleString())
    }
   setInterval(shijian,1000)
    /**
     * 根据chid删除单个数据
     * @param chid
     */
    function declectmag1(chid){
        $.ajax({
            url:"delectchid",
            type:"post",
            dataType:"json",
            data:{chid:chid},
            success:function(data){
                if(data){
                    succ("删除成功")
                }else {
                    Dialogs("删除失败","red")
                }
            }
        });
    };

    /**
     * 根据arr删除多个数据
     * @param chid
     */
    function declectmag1s(arr){
        $.ajax({
            url:"delectchids",
            type:"post",
            dataType:"json",
            data:{arr:arr},
            success:function(data){
                if(data==3){
                    succ("删除成功")
                }else if(data==1) {
                    succ("删除部分成功,已缴费的账单未删除")
                }else {
                    Dialogs("删除失败,存在未缴费的账单","red")
                }
            }
        });
    };

    /**
     * 点击批量删除
     */
    $("#delects").on("click",function(){
        let chs = $("input[name=chox]:checked")
        if(chs.length==0){
            Dialogs("请先选择删除项","black")
            return
        }
        let arr = new Array(chs.length)
        for(let i =0;i<chs.length;i++){
            let te = chs[i].value;
            arr[i]=te
        }
        declectmag1s(arr);
    });


    /**
     * 手动录入抄表单
     */
    let cid;
    let sid;
    $("#button02").on("click",function(){
        //项目id
        let C_id=cid
        //标准项目id
        let S_id=sid
        //周期
        let zhouqi=$("#zhouqi").val();
        //单价
        let dj =$("#dj").val();

        //小区id
        let vid = $("#xiaoqu").val();
        //楼宇id
        let tid = $("#louyu").val();
        //单元id
        let uid =  $("#danyuan").val();
        //房号id
        let hid= $("#fangjianhao").val();
        //起始用量
        let qsyl =$("#qsyl").val();
        //截至用量
        let jzyl=$("#jzyl").val();
        //费用（元）
        let fy=$("#fy").val();
        if(hid=="0"){
            Dialogs("用户基本信息未选择完毕！","red")
            return;
        }
        if(dj==""){
            alert("")
            return;
        }
        if(fy=="0"){
            Dialogs("起始或截至用量数据不正常！","red")
            return;
        }
        //账单日
        let zdr =$("#zdr").val();
        if(zdr==""){
            Dialogs("请选择账单日","red")
            return;
        }
        //备注
        let bz=$("#bz").val();
        if(S_id==undefined||C_id==undefined||dj==null||vid==0||tid==0||uid==0||hid==0||qsyl==null||jzyl==null||zdr==null){
            Dialogs("数据还未填写完毕","red")
            return ;
        }

        let zhangdan = {
            C_id:C_id,
            S_id:S_id,
            zhouqi:zhouqi,
            dj:dj,
            vid:vid,
            tid:tid,
            uid:uid,
            hid:hid,
            qsyl:qsyl,
            jzyl:jzyl,
            fy:fy,
            zdr:zdr,
            bz:bz
        }
        $.ajax({
            url:"addzhangdanmingxi",
            type:"post",
            dataType:"json",
            data:zhangdan,
            success:function(data){
                console.log(data)
                if(data){
                    succ("录入成功")
                }else {
                    Dialogs("录入失败","red")
                }
            }
        });
    });

    /**
     * 录入xsl表格生长城json数据
     */
    $("#button01").on("click",function(){
        let o = $("#hidd").val()
        if(o==""){
            layer.open({
                 title: '错误（提示）'
                ,content: '请导入xsl账单'
                ,offset:'100px'
            });
            return;
        }
        console.log(o)
        o= o.replaceAll("主项目名称","namec")
        o= o.replaceAll("子项目名称","names")
        o= o.replaceAll("周期","zhouqi")
        o= o.replaceAll("单价","dj")
        o= o.replaceAll("楼宇","loudong")
        o= o.replaceAll("在住小区","xiaoqu")
        o= o.replaceAll("单元号","danyuan")
        o= o.replaceAll("房号","fangjian")
        o= o.replaceAll("起始用量","qsyl")
        o= o.replaceAll("截至用量","jzyl")
        o= o.replaceAll("费用","fy")
        o= o.replaceAll("账单日","zdr")
        o= o.replaceAll("备注","bz")
        o= o.replaceAll(">","-")
        console.log(o)
            $.ajax({
                url:"daoruexcel",
                type:"post",
                dataType:"json",
                data:{"xsl":o},
                success:function(data){
                    if(data){
                        succ("录入成功")
                    }else {
                        Dialogs("录入失败","red")
                    }
                }
            });
    });


    /**已完成
     * 加载组件并赋值
     * @param obj
     */
    function add(obj){
        let tr =  document.createElement("tr");
        let td1 =  document.createElement("td");
        let chocbox = document.createElement("input");
        chocbox.type="checkbox"
        chocbox.name="chox"
        chocbox.value=obj.D_id
        $(td1).append(chocbox)
        let td2 =  document.createElement("td");
        td2.innerText=obj.D_id
        let td3 =  document.createElement("td");
        td3.innerText=obj.vname+obj.ttname+obj.Uname+obj.honame
        let td4 =  document.createElement("td");
        td4.innerText=obj.S_Name
        let td5 =  document.createElement("td");
        td5.innerText=obj.S_money
        let td8 =  document.createElement("td");
        td8.innerText=obj.D_sum
        let td9 =  document.createElement("td");
        if(obj.D_settle=="f"){
            td9.innerText="未缴费"
        }else {
            td9.innerText="已缴费"
        }
        let td11 =  document.createElement("td");
        td11.innerText=   obj.D_billdate.year+"-"+obj.D_billdate.monthValue+"-"+obj.D_billdate.dayOfMonth
        let td12 =  document.createElement("td");
        td12.innerText=(obj.S_money*obj.D_sum)
        let td13 =  document.createElement("td");
        td13.innerText=obj.D_bz
        let td14 =  document.createElement("td");
        td14.innerText=obj.ename
        let td15 =  document.createElement("td");
        td15.innerText=obj.S_czdate.year+"-"+obj.S_czdate.monthValue+"-"+obj.S_czdate.dayOfMonth
        let td10 =  document.createElement("td");
        let b2= document.createElement("button");
        $(b2).attr("class","btn bg-primary  glyphicon glyphicon-check")
        b2.onclick=function(){
            if(obj.D_settle=="f"){
                $("#addmyModal0").modal("show")
                $("#dizhi").html(td3.innerText)
                $("#leixing").html(td4.innerText)
                $("#danjia").html(td5.innerText)
                $("#xg").val(obj.D_id)
            }else {
                Dialogs("已缴费的不能修改","red")
            }
        };

        let b3= document.createElement("button");
        $(b3).attr("class","btn btn-danger  glyphicon glyphicon-trash")
        b3.onclick=function(){
            if(obj.D_settle=="f"){
                declectmag1(obj.D_id)
            }else {
                Dialogs("已缴费的不能删除","red")
            }
        };
        td10.append(b2,"  ",b3)
        $(tr).append(td1,td2,td3,td4,td5,td8,td9,td11,td12,td13,td14,td15,td10)
        $("#tableone1").append(tr)
    }

    /**已完成
     * 获取小区列表
     */
    $.ajax({
        url:"xiaoqulist1",
        type:"get",
        dataType:"json",
        success:function(data){
            console.log(data)
            for(let obj of data){
                let op =  document.createElement("option")
                op.innerText=obj.vname
                op.value=obj.vid
                $("#xiaoqu").append(op)
            }
        }
    });

    /**已完成
     * 加载下拉框
     */
    $.ajax({
        url:"getselect101",
        type:"get",
        dataType:"json",
        success:function(data){
            console.log(data)
            for(let obj of data){
                let op =  document.createElement("option")
                op.innerText=obj.S_Name
                op.value=obj.S_id
                $("#se").append(op)
            }
        }
    });

    /**半完成
     * 获取总数据
     */
   $.ajax({
       url:"selectAllbiao",
       type:"get",
       dataType:"json",
       success:function(data){
           for(let obj of data){
               //TODO
               add(obj)
           }
       }
   });

    /**已完成
     * 点击查询
     */
    $("#butt").on("click",function(){
        $("#tableone1 tr:not(:first)").remove()
        let sid = $("#se").val();
        let text = $("#text").val();
        $.ajax({
            url:"selecttiaojianchaxun",
            type:"get",
            dataType:"json",
            data:{
                "tid":sid,
                "text":text
            },
            success:function(data){
                for(let obj of data){
                    add(obj)
                }
            }
        });
    });

    /**已完成
     * 总费用变化
     */
    let sum;
    $("input[name=bianhua]").on("input",function(){
        sum = ($("#jzyl").val()-$("#qsyl").val())*$("#dj").val()
        sum = sum<0? 0 :sum
        $("#fy").val(sum)
    });


    /**-------已完成
     * 全选全部确定或取消
     */
    $("#quanxuan").on("click",function(){
        let coks = document.getElementsByName("chox");
        if(this.checked){
            for(let i  = 0;i<coks.length;i++){
                coks[i].checked=true;
            }
        }else{
            for(let i  = 0;i<coks.length;i++){
                coks[i].checked=false;
            }
        }
    })


    /**已完成
     * 小区-->楼宇
     */
    $("#xiaoqu").on("change",function(){
        $("#louyu option:not(:first)").remove()
        $("#danyuan option:not(:first)").remove()
        $("#fangjianhao option:not(:first)").remove()
        let str =$("#xiaoqu").val()
        if(str==0){
           return ;
        }
        $.ajax({
            url:"getlouyulist",
            type:"get",
            dataType:"json",
            data:{id:str},
            success:function(data){
                console.log(data)
                for(let obj of data){
                    let op =  document.createElement("option")
                    op.innerText=obj.ttname
                    op.value=obj.tid
                    $("#louyu").append(op)
                }
            }
        });

        addxiangmu(str)

    });

    /**已完成
     * 楼宇-->单元
     */
    $("#louyu").on("change",function(){
        $("#danyuan option:not(:first)").remove()
        $("#fangjianhao option:not(:first)").remove()
        let str =$("#louyu").val()
        if(str==0){
            return ;
        }
        $.ajax({
            url:"getdanyuanlist",
            type:"get",
            dataType:"json",
            data:{id:str},
            success:function(data){
                for(let obj of data){
                    let op =  document.createElement("option")
                    op.innerText=obj.Uname
                    op.value=obj.Uid
                    $("#danyuan").append(op)
                }
            }
        });





    });

    /**已完成
     * 单元-->房号
     */
    $("#danyuan").on("change",function(){
        $("#fangjianhao option:not(:first)").remove()
        let str =$("#danyuan").val()
        if(str==0){
            return ;
        }
        $.ajax({
            url:"getfanghaolist",
            type:"get",
            dataType:"json",
            data:{id:str},
            success:function(data){
                console.log(data)
                for(let obj of data){
                    let op =  document.createElement("option")
                    op.innerText=obj.honame
                    op.value=obj.hid
                    $("#fangjianhao").append(op)
                }
            }
        });





    });

    /**已完成
     * 加载项目自动生成
     */
    function addxiangmu(xid){
        $("#ul").html("")
        if(xid==0){
            return ;
        }
        $.ajax({
            url:"addxiangmulist1",
            type:"post",
            dataType:"json",
            data:{"vid":xid},
            success:function(data){
                for(let obj of data){
                   let li= document.createElement("li");
                    let a= document.createElement("a");
                    a.innerHTML="项目名称："+obj.Cname +"-----"+ "标准名称："+obj.S_Name
                    a.href="#"
                    $(a).on("click",function (){
                        $("#zhouqi").val(obj.S_date)
                        $("#dj").val(obj.S_money)
                        sum = ($("#jzyl").val()-$("#qsyl").val())*$("#dj").val()
                        sum = sum<0? 0 :sum
                        $("#fy").val(sum)
                        $("#but").html(this.innerText)
                        cid=obj.C_id
                        sid=obj.S_id
                    })
                    $(li).append(a)
                    $("#ul").append(li)
                }

            }
        });
    }
 });

function Dialogs(text,color){
    layer.open({
        content: '执行结果:'+text.fontcolor(color)
        ,offset:'100px'
        ,time:'3000'
        ,success:function(layero, index) {
            var timeNum = this.time/1000, setText = function(start){
                layer.title((start ? timeNum : --timeNum) + ' 秒后关闭', index);
            };
            setText(!0);
            this.timer = setInterval(setText, 1000);
            if(timeNum <= 0) clearInterval(this.timer);
        }
    });
};

function succ(mags){
    layer.confirm('执行结果： '+mags.fontcolor("green"), {
            offset: '100px'
            , btn: ['确定'] //按钮
        }, function(){
            window.location.reload()
        }
    );
}
</script>
</html>